<template>
  <div>
    <div id="map" style="width: 100%; height: 600px;"></div>
  </div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  name: 'OfflineMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      const map = L.map('map').setView([36.0662, 120.3826], 12); // 青岛，缩放级别12

      // 加载离线瓦片
      L.tileLayer('http://localhost:8080/article/tiles/{type}/{z}/{x}/{y}.png', {
        type: 788865972, // 地图类型
        maxZoom: 18,
        attribution: 'Offline Map'
      }).addTo(map);
    }
  }
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 600px;
}
</style>
